<template>
  <div v-if="list.length > 0" id="catalogue" class="catalogue">
    <div class="title">
      目录
    </div>
    <div :ops="{ bar: { background: '#000', opacity: 0.2, keepShow: true, size: '6px' } }">
      <ul class="c-list">
        <li v-for="e in list" :key="e.key" :class="`c-list-${e.level} ${activeId === e.key ? 'catalog-active' : ''
          }`">
          <a :href="`#${e.key}`" @click="offsetTop(e.key)">{{ e.text }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loadScript } from '~/utils/index'

const list = ref([])
const activeId = ref('devmenu1')
const menuLevel = 'h1,h2,h3'
const el = '.container_warp'

onMounted(() => {
  loadScript('https://code.jquery.com/jquery-3.7.1.min.js', () => {
    setCatalogueList()
    list.value.length > 0 && window.addEventListener('scroll', catalogTrack)
    //移动端打开目录的方法
    emitEvent('showMobileMenu', list.value.length ? true : false)
  })
})

// 设置目录
function setCatalogueList() {
  let i = 1
  list.value = []
  for (const h of $(el).find(menuLevel)) {
    const headingLevel = h.tagName.toLowerCase()
    const $h = $(h)
    $h.attr('id', `devmenu${i}`)
    const headingName = $h.text().trim()
    headingName && list.value.push({
      level: headingLevel,
      text: headingName,
      key: `devmenu${i}`,
    })
    i++
  }
}
function catalogTrack() {
  let $currentHeading = $(el).find(menuLevel)
  for (const heading of $(el).find(menuLevel)) {
    const $heading = $(heading)
    if ($heading.offset().top - $(document).scrollTop() > 100) {
      break
    }
    $currentHeading = $heading
  }
  const id = $currentHeading.attr('id')
  if (activeId.value !== id && typeof id === 'string') {
    $('.c-list').scrollTop(Number(id.replace('devmenu', '')) * 32 - 86)
  }
  activeId.value = id
}
function offsetTop(key: any) {
  setTimeout(() => {
    $('html,body').animate({ scrollTop: $(`#${key}`).offset().top - 80 }, 200)
  }, 0)
}
</script>

<style lang="scss" scoped>
.catalogue {
  width: 100%;
  background: #fff;
  position: relative;
  width: 300px;

  .title {
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    font-weight: bold;
    color: #1c1c28;
    border-bottom: 1px solid #f2f2f5;
    position: sticky;
    top: 0px;
    background-color: #fff;
    z-index: 1;
  }

  .c-list {
    padding: 16px;
    line-height: 32px;
    scroll-behavior: smooth;
    overflow: scroll;
    max-height: 420px;

    li {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #1c1c28;
      border-radius: 4px;
      margin-bottom: 4px;

      &:hover {
        color: #000;
        background-color: #F1F1F8;
      }
    }

    .catalog-active {
      color: #000;
      background-color: #F1F1F8;

    }

    &-h1 {
      // color: #1c1c28;
      padding-left: 8px;
    }

    &-h2 {
      // color: #555770;
      // text-indent: 0.5em;
      padding-left: 16px;
    }

    &-h3 {
      // color: #8f90a6;
      // text-indent: 1em;
      padding-left: 32px;
    }

    &-h4 {
      // color: #8f90a6;
      // text-indent: 1.5em;
    }

    a {
      color: inherit;

      &:hover {
        color: #000;
      }
    }
  }
}
</style>
